<template>
  <div
    id="home"
    :style="
      $route.name === 'home' ||
      $route.name === 'center' ||
      $route.name === 'search'
        ? { 'background-color': '#f4f4f4' }
        : { 'background-color': '#ffffff' }
    "
  >
    <el-container>
      <el-header
        class="header"
        :style="
          $route.name === 'center' ? { height: '40px' } : { height: '150px' }
        "
      >
        <Header />
      </el-header>

      <el-header v-if="$route.name === 'home'" class="navbar">
        <Navbar class="nr" />
      </el-header>

      <el-main class="product">
        <Product
          v-if="$route.name === 'home' || $route.name === 'search'"
          class="list"
        />
        <router-view class="list" />
      </el-main>

      <el-main class="pledge">
        <img
          src="https://img.alicdn.com/tfs/TB1I8svRXXXXXcUXpXXXXXXXXXX-990-100.jpg"
          style="width: 1100px; height: 140px"
        />
      </el-main>
      <el-footer class="footer">
        <div class="beian">
          <div class="webset">
            网站地址：{{ baseInfo.url }} 电话:{{ baseInfo.phone }} 邮箱:
            {{ baseInfo.mailbox }}
          </div>
          <div class="">
            {{ baseInfo.websiteICP }} | {{ baseInfo.putOnRecords }} |
            {{ baseInfo.address }}
          </div>
          <div>Copyright © 2021-8-24 |优优youyou.xiatianyu.cn版权所有</div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
#home {
  background-color: #f4f4f4;
}
.header {
  // border: 1px solid darkcyan;
  // height: 150px;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 0px;
}
.navbar {
  // border: 1px solid darkgoldenrod;
  height: 500px !important;
  // margin: 0 80px;
  padding: 0px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 150px;
  // overflow: hidden;

  .nr {
    // border: 1px solid;
    max-width: 1190px !important;
    min-width: 1190px !important;
    // width: 100%;
    // margin: 0 50px;
  }
}
.product {
  // border: 1px solid ;
  min-height: 800px !important;
  // margin: 0 80px;
  padding: 0px;
  display: flex;
  justify-content: center;
  // margin-bottom: 150px;
  overflow: hidden;

  .list {
    max-width: 1190px !important;
    min-width: 1190px !important;
    // border: 1px solid;
  }
}
.pledge {
  border-top: 1px solid darkgray;
  // border-bottom: 1px solid darkgray;
  height: 180px;
  background-color: #fff;
  // padding-left: 200px;
  overflow: hidden;
  text-align: center;
}
</style>

<style lang="scss" scoped>
.footer {
  // margin-top: 100px;
  background-color: #000000;
  height: 100px !important;
  overflow: hidden;
  border-top: 3px solid #ff0036;
  .beian {
    text-align: center;
    color: #a4a4a4;
    font-size: 12px;
    margin-top: 20px;
  }
}
</style>

<script>
import Header from '../views/header'
import Navbar from '../views/navbar'
import Product from '../views/products'
import { getWebset } from '../api/webset'

export default {
  components: {
    Header,
    Navbar,
    Product
  },
  data () {
    return {
      baseInfo: {
        url: '',
        phone: '',
        mailbox: '',
        introduce: '',
        address: '',
        websiteICP: '',
        putOnRecords: ''
      }
    }
  },
  mounted () {
    getWebset(1).then(({ data }) => {
      console.log(data)
      this.baseInfo = data.data
    })
  }
}
</script>
